<ng-container *ngIf="(selectedTabLink$ | async) as tab">
  <ng-container *ngIf="tab === 'hot'">
    <app-image-slide [slides]="imageSlides$ | async"></app-image-slide>
    <app-horizontal-grid>
      <!--指令所在的元素叫宿主-->
      <span appGridItem *ngFor="let item of channels$ | async">
        <img [src]="item.icon" alt="" [appGridItemImage]="'2rem'" [fitMode]="'cover'">
        <span appGridItemTitle="0.5rem">{{ item.title }}</span>
      </span>
    </app-horizontal-grid>
  </ng-container>
</ng-container>

<div class="ad-container" *ngIf="ad$ | async as ad">
  <img [src]="ad.imageUrl" alt="" class="ad-image">
</div>

<app-vertical-grid [itemWidth]="'20rem'" [itemHeight]="'2rem'">
  <app-product-card 
    *ngFor="let product of products$ | async"
    [product]="product"
    [routerLink]="['/product', product.id]"
  ></app-product-card>
</app-vertical-grid>